<template>
	<view class="position-r">
		<swiper
			:style="{height:height+'rpx'}" 
			acceleration
			autoplay
			circular 
			:interval="3000"
			:duration="1000"
			:current='current'
			@change='changeEvent'
			>
			<swiper-item class="w-100 h-100" v-for="(item,index) in imgArr" :key='index'>
				<image @tap='$tool.previmg(imgArr,index)' lazy-load :src="item" class="h-100 w-100" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!--  -->
		<!-- 跑马灯 -->
		<view class="Lantern">
			<view class="d-flex position-r">
				<text class="item" v-for="(item,index) in imgArr" :key='index'></text>
				<text class="itemActve" :style="{left:offsetLeft+'px'}"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'x-rotation',
		props:{
			height:{
				type:[String,Number],
				default:500
			},
			imgArr:{
				type:Array,
				default:[]
			}
		},
		data(){
			return {
				current:0, // 轮播图当前选中项
				offsetLeft:0, // 跑马灯
			}
		},
		watch:{
			current(v){
				if(v==0){
					this.offsetLeft=0
					return
				}
				this.offsetLeft=20*v+4*v
			}
		},
		methods:{
			// 轮播切换，
			changeEvent(e){
				this.current=e.detail.current
			},
		}
	}
</script>

<style lang="scss">
	.Lantern{
		position: absolute;
		bottom: 20rpx;
		left: 30rpx;
		text{
			display: inline-block;
			width: 20px;
			height: 2px;
		}
		.item{
			margin-left: 4px;
			background-color: #FFE3E3E3;
		}
		.itemActve{
			position: absolute;
			left: 0;
			bottom: 0;
			margin-left: 4px;
			background: $color-zt;
			transition: all 0.3s;
		}
	}
</style>
